<!-- 选择商品 -->
<template>
	<view class="">
		<u-navbar :is-back="true" title="选择商品"></u-navbar>
		<view class="bg-white padding20">
			<u-search placeholder="商品编号搜索" v-model="keyword"></u-search>
		</view>

		<view class="padding-lr30 color-gray fs26 bg-white flex-bettwen">
			<view class="m-t20 m-b20" @click="isShowSortTime = true">
				<text class="m-r10">{{currentSortText}}</text>
				<u-icon name="arrow-down"></u-icon>
			</view>
			<view class="flex-center m-t20 m-b20">
				<text class="m-r30">筛选</text>
				<text>|</text>
				<text class="m-l30">批量操作</text>
			</view>
		</view>

		<view class="padding30">
			<view class="m-b20 hidden br12 bg-white padding20" @click="selectItem(item)" v-for="(item,index) in list"
				:key="index">
				<view class="flex">
					<!-- 	<u-lazy-load :image="item.cover" :index="index"
						class="w-130 h-130 m-r20 br16"></u-lazy-load> -->
					<view class="flex-center">
						<u-icon name="plus-circle-fill" color="#3370ff" size="36" class="m-r20"></u-icon>
						<image :src="item.cover" mode="" class="w-130 h-130 m-r20 br16"></image>
					</view>
					<view class="flex1 flex-column-between" style="">
						<view class="text-overflow fs26">{{item.productName}}</view>
						<view class="color-gray fs24">销量{{item.saleNum}} <text class="margin-lr10">|</text>库存8374 <text
								class="margin-lr10">|</text>暂无评价</view>
						<view class="flex-bettwen">
							<view class="flex-center">
								<view class="price-color fs30" style="font-weight: bold;"> <text class="fs24">￥</text>
									{{item.price}}</view>
								<text class="fs24 color-gray">/{{item.unit}}({{item.emptyDiff}})</text>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>


		<!-- 排序 -->
		<u-popup v-model="isShowSortTime" mode="bottom">
			<view class="padding30">
				<view class="center fs30 padding-tb20" @click="selectSortTime(item,index)"
					:class="currentSortTime == index?'color-blue':''" v-for="(item,index) in sortTime" :key="index">
					{{item}}
				</view>
			</view>
		</u-popup>


	</view>
</template>

<script>
	import {
		myProducts
	} from '@/api/enquriy/index'
	export default {
		data() {
			return {
				keyword: '',
				current: 0,
				list: [],
				isShowSortTime: false,
				currentSortTime: 0,
				currentSortText: '最近创建在上',
				sortTime: [
					'最新创建在上',
					'最新创建在下',
					'最新上架在上',
					'最新上架在下',
					'销量从高到低',
					'销量从低到高',
					'价格从高到低',
					'价格从低到高',
					'库存从高到低',
					'价格从低到高',
				],
				params: {
					pageNum: 1,
					pageSize: 20
				}
			}
		},
		mounted() {
			this.myProducts()
		},
		// 下拉刷新
		async onPullDownRefresh() {
			this.params.pageNum = 1
			this.list = []
			await this.myProducts()
			uni.stopPullDownRefresh();
		},
		// 上滑触底
		onReachBottom() {
			console.log('触底了');
			this.params.pageNum += 1
			this.myProducts()
		},
		methods: {
			// 选择商品
			selectItem(item) {
				uni.$emit('selectGoods', item)
				uni.navigateBack()
			},
			//取店内商品
			async myProducts() {
				let res = await myProducts(this.params)
				this.list.push(...res.rows)
				console.log('店铺商品', res);
			},
			selectSortTime(item, idx) {
				this.currentSortText = item
				this.currentSortTime = idx
				this.isShowSortTime = false
			},

		}
	}
</script>

<style lang="scss" scoped>
	.tab-item {
		text-align: center;
		position: relative;

	}

	.tab-item-active {
		color: #269dd1;
	}

	.tab-item-active::after {
		position: absolute;
		content: "";
		display: block;
		width: 50rpx;
		height: 10rpx;
		background: #269dd1;
		left: 50%;
		bottom: 0;
		transform: translate(-50%);
	}
</style>